<template>
	<view class="">
		<wpp-tab :width="'33%'" :tabs="tabList" :active-index="activeIndex" @change="changeTab"></wpp-tab>
		<view v-if="activeIndex==1">
			<content-recommend :account-id="accountId" :active-tab="2" :on-reach-bottom="reachBottom"></content-recommend>
		</view>
		<view v-if="activeIndex==2" class="task-list">
			<view class="task-item" v-for="item in taskList" :key="item.id" @click="seeDetails(item)">
				<view class="title">
					<text>{{item.title}}</text>
				</view>
				<view class="content">
					<text class="text">{{item.content}}</text>
					<view>
                        <text class="see">查看详情</text>
                        <uni-icons type="right" size="24rpx" color="#999"></uni-icons>
                    </view>
				</view>
				<view class="time">
					<text>发布时间：{{item.add_time.split(' ')[0]}}</text>
				</view>
			</view>
            <uni-load-more :status="loadMore" color="#BFBFBF"></uni-load-more>
		</view>
		<view v-if="activeIndex==3">
			<active-overview :account-id="accountId" :my-publish="true"></active-overview>
		</view>
	</view>
</template>
<script>
import wppTab from '@/components/wpp-tab.vue'
import contentRecommend from '../recommend/content-recommend.vue'
import activeOverview from '../student/components/active-overview.vue'
import textEditor from '../student/components/text-editor.vue'
export default {
	components: {
        wppTab,
		contentRecommend,
        activeOverview,
		textEditor
	},
    data() {
        return {
            tabList: [{value: 1, table: '新鲜事'}, {value: 2, table: '基础任务'}, {value: 3, table: '特色活动'}],
            activeIndex: 1, // 对应tabList的value
            accountId: '', // 账号id
			reachBottom: 1 ,// 滑到最底部时改变
			taskList: [], // 任务列表
            currentPage: 1, // 当前页
            loadMore: 'more', // more获取更多数据 loading加载中 no-more 无更多数据 
        }
    },
	onReachBottom(){
        if(this.loadMore == 'more'){
            this.reachBottom ++
            this.changeTab(this.activeIndex)
        }
	},
    onLoad(){
        let userInfo = uni.getStorageSync('tokenObj')
        this.accountId = userInfo.accountId+''
    },
	methods: {
		// 切换选项
        changeTab(val){
            this.activeIndex = val;
            if(val == 2){
                this.currentPage = 1
                this.taskList = []
                this.getTaskPage()
            }
            
        },
        // 查询老师发布的任务
        getTaskPage(){
            this.loadMore = 'loading'
            this.api.get('ordinary/findTaskPage', {
                isMy: true,
                page: this.currentPage,
                limit: 10
            }).then(res=>{
                if(res.data.state == 'ok'){
                    this.loadMore = 'more'
                    let taskPage = res.data.taskPage;
                    this.taskList = this.taskList.concat(taskPage.list);
                    if(taskPage.totalPage <= this.currentPage){
                        this.loadMore = 'no-more'
                    }
                }
            })
        },
        // 查看任务详情
		seeDetails(item){
			uni.navigateTo({
				url: `/pages/student/task-details?taskId=${item.id}`
			})
		},
	}
}
</script>
<style lang="less" scoped>
	.my-course{
		border-top: 1rpx solid #EEEEEE;
	}
    .task-item{
        margin: 0 32rpx;
        padding: 20rpx 0 32rpx;
        border-bottom: 1rpx solid #EEEEEE;
        .title{
           line-height: 40rpx;
           font-weight: bold;
           white-space: nowrap;
           text-overflow: ellipsis;
           overflow: hidden;
        }
        .content{
            margin-top: 24rpx;
        }
        .text{
            display: block;
            color: #666666;
            line-height: 44rpx;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            line-clamp: 2;
            -webkit-box-orient: vertical;
            white-space: pre-line;
        }
        .see{
            color: #999999;
        }
        .time{
            margin-top: 24rpx;
            color: #999999;
            font-size: 24rpx;
            line-height: 34rpx;
        }
    }
</style>